import React, { Component } from "react";
import { TreeSelect, DatePicker, Button, Input, List, Card } from "antd";
import moment from "moment";
import { getLiveList, siteList } from "../../services/services";
import "./RecentLive.less";
import { judgeMonCode, formatDate } from '@/utils/formatMonTextStyle.js'

const { RangePicker } = DatePicker;
const TreeSelectNode = TreeSelect.TreeNode;
const { Meta } = Card;
const StatusEnum = { 0: "未审核", "-1": "审核拒绝", 1: "待直播", 2: "直播中", 3: "已结束" };
const data = [
  {
    id: 1,
    title: "Title 1",
    status: 1,
    start_time: "2020-08-20 18:08:08"
  },
  { id: 2, title: "Title 2", status: 0, start_time: "2020-08-20 18:08:08" },
  { id: 3, title: "Title 3", status: 1, start_time: "2020-08-20 18:08:08" },
  { id: 4, title: "Title 4", status: 1, start_time: "2020-08-20 18:08:08" }
];
class RecentLive extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      page: 1,
      keyword: "",
      loading: true,
      total: 0,
      selectSiteList: [],
      sitelist: [],
      currentSiteList: [],
      start_time: "",
      end_time: ""
    };
  }
  handleClick = id => {
    console.log(id);
  };
  componentDidMount() {
    this.getList({ per_page: 12 });
    this.getSiteList();
  }
  // 获取直播列表
  getList = (params = {}) => {
    getLiveList(params)
      .then(res => {
        if (res.code === 200) {
          this.setState({
            list: res.data.data,
            total: res.data.total,
            loading: false
          });
        } else {
          this.setState({
            loading: false
          });
        }
      })
      .catch(err => {
        console.log(err);
      });
  };
  // 获取站点列表
  getSiteList = () => {
    siteList().then(res => {
      console.log(res);
      if (res.code === 200) {
        this.setState({
          sitelist: res.data
        });
      }
    });
  };
  // 页数变化
  pagechange = page => {
    this.setState({
      page,
      loading: true
    });
    this.getList({
      page,
      per_page: 12
    });
  };
  inputChange = e => {
    this.setState({
      keyword: e.target.value
    });
  };
  // 点击搜索
  handleSearch = () => {
    this.setState({
      page: 1,
      loading: true
    });
    const params = {
      page: 1,
      per_page: 12,
      site_id: this.state.currentSiteList,
      keyword: this.state.keyword,
      start_time: this.state.start_time,
      end_time: this.state.end_time
    };
    this.getList(params);
  };
  handleReset = () => {
    this.setState({
      page: 1,
      loading: true,
      keyword: "",
      currentSiteList: [],
      selectSiteList: [],
      start_time: "",
      end_time: ""
    });
    this.getList({ per_page: 12 });
  };
  // 跳转至详情页
  goDetail = item => {
    if (item && item.site_domain && item.live_id) {
        let url;
        if(item.site_id == 69){
            url = `https://liveshow.sobeylingyun.com/web/fslivemobile/index.html?id=${item.live_id}&domain=https://cyy.nmgcyy.com.cn`;
        }else{
            url = `${document.location.protocol}//${item.site_domain}/application/videoa01/share_h5/livesharepc.html?news_id=${item.live_id}`;
        }
      
        window.open(url);
    }
  };

  treeNodeDom = data => {
    return data.map(item => {
      return (
        <TreeSelectNode value={item.id} title={item.site_name} key={item.id}>
          {item.children && this.treeNodeDom(item.children)}
        </TreeSelectNode>
      );
    });
  };
  handleRangePicker = dates => {
    this.setState({
      start_time: dates[0].format("YYYY-MM-DD HH:mm:ss"),
      end_time: dates[1].format("YYYY-MM-DD HH:mm:ss")
    });
  };
  treeSelectChange = (value, label, e) => {
    if (!!value.length && e.triggerValue === 1) {
      this.setState({
        selectSiteList: value,
        currentSiteList: []
      });
    } else {
      this.setState({
        selectSiteList: value,
        currentSiteList: value
      });
    }
  };

  // 判断 中文 或 蒙文 ， 并处理显示排版
  handleMonTextForLiveList = (item) => {
    if (judgeMonCode(item.title)) {
      if (formatDate(item.start_time) > 1696089600000) {
        return (
          <span 
            class="mon_text1"
            style={{ height: "180px", cursor: "pointer", writingMode: "vertical-lr", whiteSpace: "pre-wrap" }} 
            onClick={() => this.goDetail(item)} title={item.title}
          >
            {item.title}
          </span>
        )
      } else {
        return (
          <span 
            class="mon_text2"
            style={{ height: "180px", cursor: "pointer", writingMode: "vertical-lr", whiteSpace: "pre-wrap" }} 
            onClick={() => this.goDetail(item)} title={item.title}
          >
            {item.title}
          </span>
        )
      }
    } else {
      return (
        <span 
          style={{ height: "180px", cursor: "pointer" }} 
          onClick={() => this.goDetail(item)} title={item.title}
        >
          {item.title}
        </span>
      )
    }
  }

  render() {
    const pagination = {
      onChange: this.pagechange,
      pageSize: 12,
      total: this.state.total,
      showTotal: () => `共 ${this.state.total} 条记录`
    };
    console.log(this.state.sitelist);
    return (
      <div className="RecentLive">
        <div key="t2" className="BasicContent">
          <div className="main">
            <div className="action">
              <Input className="searchInput" value={this.state.keyword} type="text" placeholder="请输入关键词" onChange={this.inputChange} />
              <RangePicker style={{ width: 230 }} showTime format="YYYY-MM-DD" className="timescope" placeholder={["开始时间", "结束时间"]} onOk={this.handleRangePicker} />
              <TreeSelect placeholder="请选择站点" className="tsf_tree" onChange={this.treeSelectChange} treeCheckable={true} value={this.state.selectSiteList} maxTagCount={1}>
                {this.treeNodeDom(this.state.sitelist)}
              </TreeSelect>
              <Button className="searchBtn" type="primary" onClick={this.handleSearch}>
                搜索
              </Button>
              <Button onClick={this.handleReset} type="primary">
                重置
              </Button>
            </div>
            <List
              grid={{ gutter: 16, column: 4 }}
              dataSource={this.state.list}
              pagination={pagination}
              loading={this.state.loading}
              renderItem={item => (
                <List.Item>
                  <Card className="card" bordered={false} hoverable cover={<img onClick={() => this.goDetail(item)} className="cover" alt="example" src={item.cover_url} />}>
                    <Meta
                      title={
                        <div className="card_meta">
                          <div className="card_meta_title">
                            {/* 1. 判断 中文 还是 蒙文 */}
                            {this.handleMonTextForLiveList(item)}
                          </div>
                          
                          <div className="card_meta_actions">
                            <span className="card_actions_name">{item.site_name}</span>
                            <span className="card_actions_time">{item.start_time}</span>
                          </div>
                        </div>
                      }
                    />
                    <div className="card_status">{item.status === 1 ? "待直播" : item.status === 2 ? "直播中" : "已结束"}</div>
                  </Card>
                </List.Item>
              )}
            />
          </div>
        </div>
      </div>
    );
  }
}
export default RecentLive;
